<template>
  <el-dialog
      destroy-on-close
      :model-value="modelValue"
      :class="styles['dialog']"
      width="35%"
      title="卡牌已回寄"
      center
      @close="close"
  >
    <p class="ato-sub-title">回寄地址信息：</p>
    <ul :class="styles['address-info']">
      <li v-for="item in addressInfo" :key="item.label">
        <span>{{ item.label }}: </span>
        <span>{{ item.value || '-' }}</span>
      </li>
    </ul>
    <p class="ato-sub-title ato-mt-12">回寄卡牌UID：</p>
    <ul :class="styles['card-uid']">
      <li v-for="cardId in state.cardIds" :key="cardId">{{ cardId }}</li>
    </ul>
    <p class="ato-sub-title ato-mt-12">物流信息：</p>
    <ul :class="styles['logistics-info']">
      <li v-for="item in logisticsInfo" :key="item.label">
        <span>{{ item.label }}: </span>
        <span>{{ item.value || '-' }}</span>
      </li>
      <li>
        <span>物流查询: </span>
        <el-button type="primary">查看物流信息</el-button>
      </li>
    </ul>
  </el-dialog>
</template>

<script setup name="ReturnCardLogisticsDialog">
import {computed, onUnmounted, ref, watch} from 'vue'
import {queryCardReturnApi} from '@/service/card'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  cardId: {
    type: [Number, String],
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])

const state = ref({})
// 地址信息
const addressInfo = computed(() => {
  const {receiver, receiverAddress, receiverPhone} = state.value
  return [
    { label: '收件人', value: receiver },
    { label: '收件人电话', value: receiverPhone },
    { label: '收件人地址', value: receiverAddress }
  ]
})
// 物流信息
const logisticsInfo = computed(() => {
  const {sendTime, logisticsCompany, trackingNo} = state.value
  return [
    { label: '寄出时间', value: sendTime },
    { label: '物流公司', value: logisticsCompany },
    { label: '物流单号', value: trackingNo }
  ]
})

// 获取卡牌uid对应回寄物流信息
async function getStateData () {
  const res = await queryCardReturnApi(props.cardId)
  if (res.code === __code) {
    // todo
    state.value = res.data
  }
}

const close = () => {
  emit('update:modelValue', false)
}

// 监听id变化更换数据
const unwatch = watch(() => props.cardId, () => {
  if(props.cardId)  getStateData()
}, {immediate: true})

onUnmounted(() => {
  // 取消监听
  unwatch()
})
</script>

<style lang="less" src="./index.less" module="styles">
</style>
